import {Card, Empty, List} from "antd";
import React from "react";
import {Component} from "react";
import {SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import {inject, observer} from "mobx-react";
import CourseStore from "../../stores/CourseStore";
import {withRouter} from "react-router-dom";
import ModuleHeader from "../ModuleHeader";
import "./index.less"
import {newGuid, ResetImageHeight} from "../../utils/Utils";
import GlobalStore from "../../stores/GlobalStore";

interface ModuleGroupProps {
    title: string;
    requestData: any;
    history?: any;
    courseStore?: CourseStore;
    grid?: boolean;
    path?: string;
    globalStore?: GlobalStore;
}

interface ModuleGroupState {
    dataSource?: any
}

// @ts-ignore
@withRouter
@inject("courseStore", "globalStore")
@observer
class moduleGroupRecommend extends Component<ModuleGroupProps, ModuleGroupState> {
    constructor(props: ModuleGroupProps) {
        super(props);
        this.state = {
            dataSource: null,
        };
    }

    componentDidMount() {
        this.props.requestData().then((data) => {
            this.setState({dataSource: data})
        });
        window.onresize = function (e) {
            ResetImageHeight();
        }
    }

    renderHeader() {
        return (
            <ModuleHeader title={this.props.title} hideMore={true} onclick={() => {
                this.props.history.push(this.props.path)
            }}/>
        );
    }

    render() {
        const {dataSource} = this.state;
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        return (
            <div className="courseContainer" style={{margin: "0 auto"}}>
                {!dataSource || dataSource.length === 0 ? (
                    <Empty></Empty>
                ) : (<div className="course-body">
                        {this.renderHeader()}
                        {
                            this.props.grid ? <div className="course-grid">
                                <div style={{width: "39%"}}>
                                    <Card
                                        key={newGuid()}
                                        bordered={false}
                                        className={"course-grid-item1"}
                                        bodyStyle={{
                                            padding: 0,
                                            height: "100%",
                                            background: "white",
                                            //borderRadius: self ? "0.08rem" : "0.04rem",
                                        }}
                                        onClick={() => {
                                            let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${dataSource[0].id}`;
                                            window.open(path);
                                        }}
                                    >
                                        <div
                                            style={{
                                                width: "100%",
                                                height: "auto",
                                                overflow: "hidden"
                                            }}
                                        >
                                            <div
                                                id="img-container"
                                                style={{
                                                    width: "100%"
                                                }}
                                            >
                                                <img
                                                    className="img-animation"
                                                    style={{
                                                        // objectFit: "cover",
                                                        width: "100%",
                                                        height: "100%",
                                                        //borderRadius: self ? "0.08rem" : "0.04rem"
                                                    }}
                                                    onLoad={() => {
                                                        ResetImageHeight();
                                                    }}
                                                    src={SERVER_PICTURE_URL + "/" + dataSource[0].courseImg}
                                                />
                                            </div>
                                        </div>

                                        <h3 style={{
                                            color: "#333333",
                                            fontSize: "0.26rem",
                                            marginTop: "0.23rem",
                                            marginBottom: "0.23rem",
                                            paddingLeft: "0.2rem",
                                            whiteSpace: "nowrap",
                                            overflow: "hidden",
                                            textOverflow: "ellipsis"
                                        }}>{dataSource[0].courseName}</h3>
                                        <h4
                                            style={{
                                                color: "#666666",
                                                fontSize: "0.18rem",
                                                wordWrap: "break-word",
                                                textOverflow: "ellipsis",
                                                overflow: "hidden",
                                                paddingLeft: "0.2rem",
                                                whiteSpace: "nowrap",
                                                // textSpace:"0.03rem"
                                            }}
                                        >{dataSource[0]?.teacherInfo ? `${dataSource[0].teacherInfo.name} | ${dataSource[0].teacherInfo.titles}` : `暂无老师信息`}</h4>
                                        {
                                            <h3
                                                className="hide-text-2-column"
                                                style={{
                                                    color: "#666666",
                                                    fontSize: "0.18rem",
                                                    paddingLeft: "0.2rem",
                                                    marginTop: "0.23rem",
                                                }}>&emsp;&emsp;{dataSource[0]?.description}</h3>
                                        }
                                        {
                                            <h3 style={{
                                                color: "#666666",
                                                fontSize: "0.18rem",
                                                marginTop: "0.23rem",
                                                marginRight: "0.2rem",
                                                display: "flex",
                                                justifyContent: "flex-end"
                                            }}>访问人数&emsp; {dataSource[0]?.count}</h3>
                                        }

                                    </Card>
                                </div>
                                <div style={{
                                    width: "61%",
                                    display: "flex",
                                    flexWrap: "wrap",
                                    marginTop: "-0.06rem",
                                }}>
                                    {
                                        dataSource?.map((element: any, index) => {
                                            return index === 0 ? null :
                                                <div key={this.props.title + index} style={{
                                                    width: "30.9%",
                                                    height: "48%",
                                                    marginTop: "0.06rem",
                                                    marginLeft: "0.2rem"
                                                }}>
                                                    <Card
                                                        key={index}
                                                        bordered={false}
                                                        className="course-card"
                                                        bodyStyle={{
                                                            padding: 0,
                                                            height: "100%",
                                                            background: "white",
                                                            //borderRadius: self ? "0.08rem" : "0.04rem",
                                                        }}
                                                        onClick={() => {
                                                            let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${element.id}`;
                                                            window.open(path);
                                                        }}
                                                    >
                                                        <div
                                                            style={{
                                                                width: "100%",
                                                                height: "auto",
                                                                overflow: "hidden"
                                                            }}
                                                        >
                                                            <div
                                                                id="img-container"
                                                                style={{
                                                                    width: "100%"
                                                                }}
                                                            >
                                                                <img
                                                                    className="img-animation"
                                                                    style={{
                                                                        // objectFit: "cover",
                                                                        width: "100%",
                                                                        height: "100%",
                                                                        //borderRadius: self ? "0.08rem" : "0.04rem"
                                                                    }}
                                                                    onLoad={() => {
                                                                        ResetImageHeight();
                                                                    }}
                                                                    src={SERVER_PICTURE_URL + "/" + element.courseImg}
                                                                />
                                                            </div>
                                                        </div>

                                                        <h3
                                                            style={{
                                                                color: "#333333",
                                                                fontSize: "0.2rem",
                                                                marginTop: "0.13rem",
                                                                marginBottom: "0.13rem",
                                                                paddingLeft: "0.2rem",
                                                                whiteSpace: "nowrap",
                                                                overflow: "hidden",
                                                                textOverflow: "ellipsis"
                                                            }}>{element.courseName}</h3>
                                                        <h4
                                                            style={{
                                                                color: "#666666",
                                                                fontSize: "0.18rem",
                                                                wordWrap: "break-word",
                                                                textOverflow: "ellipsis",
                                                                overflow: "hidden",
                                                                paddingLeft: "0.2rem",
                                                                whiteSpace: "nowrap",
                                                                // textSpace:"0.03rem"
                                                            }}
                                                        >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                                                    </Card>
                                                </div>
                                        })
                                    }
                                </div>
                            </div> : <div className="course-flex">
                                {
                                    this.state.dataSource?.records.map((element: any, index) => {
                                        const self = this.props.grid && index === 0;
                                        return <Card
                                            key={this.props.title + index}
                                            bordered={false}
                                            className={self ? "course-grid-item1 " : "course-card"}
                                            bodyStyle={{
                                                padding: 0,
                                                height: "100%",
                                                background: "white",
                                                //borderRadius: self ? "0.08rem" : "0.04rem",
                                            }}
                                            onClick={() => {
                                                let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${element.id}`;
                                                window.open(path);
                                            }}
                                        >
                                            <div
                                                style={{
                                                    width: "100%",
                                                    height: "auto",
                                                    overflow: "hidden"
                                                }}
                                            >
                                                <div
                                                    id="img-container"
                                                    style={{
                                                        width: "100%"
                                                    }}
                                                >
                                                    <img
                                                        className="img-animation"
                                                        style={{
                                                            // objectFit: "cover",
                                                            width: "100%",
                                                            height: "100%",
                                                            //borderRadius: self ? "0.08rem" : "0.04rem"
                                                        }}
                                                        onLoad={() => {
                                                            ResetImageHeight();
                                                        }}
                                                        src={SERVER_PICTURE_URL + "/" + element.courseImg}
                                                    />
                                                </div>
                                            </div>

                                            <h3
                                                style={{
                                                    color: "#333333",
                                                    fontSize: self ? "0.26rem" : "0.2rem",
                                                    marginTop: self ? "0.23rem" : "0.13rem",
                                                    marginBottom: self ? "0.23rem" : "0.13rem",
                                                    paddingLeft: "0.2rem",
                                                    whiteSpace: "nowrap",
                                                    overflow: "hidden",
                                                    textOverflow: "ellipsis"
                                                }}>{element.courseName}</h3>
                                            <h4
                                                style={{
                                                    color: "#666666",
                                                    fontSize: "0.18rem",
                                                    wordWrap: "break-word",
                                                    textOverflow: "ellipsis",
                                                    overflow: "hidden",
                                                    paddingLeft: "0.2rem",
                                                    whiteSpace: "nowrap",
                                                    // textSpace:"0.03rem"
                                                }}
                                            >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                                            {
                                                self ? <h3
                                                    className="hide-text-2-column"
                                                    style={{
                                                        color: "#666666",
                                                        fontSize: "0.18rem",
                                                        paddingLeft: "0.2rem",
                                                        marginTop: "0.23rem",
                                                    }}>&emsp;&emsp;{element?.description}</h3> : null
                                            }
                                            {
                                                self ? <h3 style={{
                                                    color: "#666666",
                                                    fontSize: "0.18rem",
                                                    marginTop: "0.23rem",
                                                    marginRight: "0.2rem",
                                                    display: "flex",
                                                    justifyContent: "flex-end"
                                                }}>访问人数&emsp; {element?.count}</h3> : null
                                            }
                                        </Card>
                                    })
                                }
                            </div>
                        }
                    </div>
                )}
            </div>
        );
    }
}

export default moduleGroupRecommend;